<template>
    <section class="NewsSecondaryList-box">
        <app-header></app-header>

        <div class="main-content">
            <div class="container">
                <a-breadcrumb>
                    <a-breadcrumb-item><router-link to="/" title="首页" alt="首页">首页</router-link></a-breadcrumb-item>
                    <a-breadcrumb-item><router-link to="/News" title="新闻资讯" alt="新闻资讯">新闻资讯</router-link></a-breadcrumb-item>
                    <a-breadcrumb-item>{{newsTypeName}}</a-breadcrumb-item>
                </a-breadcrumb>

                <a-row :gutter="48">
                    <a-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16" class="left-box">
                        <a-row class="clearfix recommend-news-five-banner-box">
                            <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="left-one-big-img-box">
                                <figure>
                                    <div class="inside">
                                        <a :href="oneBigImg.url" target="_blank" :title="oneBigImg.description" :alt="oneBigImg.description">
                                            <img v-lazy="oneBigImg.photo" :title="oneBigImg.description" :alt="oneBigImg.description"/>
                                            <p class="webkit-text-overflow-1lines">{{ isNull0(oneBigImg.description) }}</p>
                                        </a>
                                    </div>
                                </figure>
                            </a-col>
                            <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="right-four-small-img-box">
                                <a-row>
                                    <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="right-four-small-img-li" v-for="(item, index) in fourSmallImgItem" :key="index">
                                        <div class="inside">
                                            <a :href="item.url" target="_blank" :title="item.description" :alt="item.description">
                                                <img v-lazy="item.photo" :title="item.description" :alt="item.description"/>
                                                <p class="webkit-text-overflow-1lines">{{ isNull0(item.description) }}</p>
                                            </a>
                                        </div>
                                    </a-col>
                                </a-row>
                            </a-col>
                        </a-row>
                        <!--新闻资讯二级类型的主体内容-->
                        <div class="news-secondary-type-box">
                            <div class="public-content">
                                <header class="clearfix">
                                    <span>{{newsTypeName}}</span>
                                </header>
                                <ul v-show="!noDataShow">
                                    <li class="clearfix" v-for="(item, index) in NewsSecondaryTypeItem" :key="index">
                                        <a-card :title="null" hoverable :loading="NewsSecondaryTypeListLoading">
                                            <a-row>
                                                <article v-if="item.photo">
                                                    <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="news-list-box-left">
                                                        <router-link :to="{name: 'NewsDetails', params: {newsId: item.id }}" :title="item.title" :alt="item.title">
                                                            <img v-lazy="item.photo" :title="item.title" :alt="item.title"/>
                                                        </router-link>
                                                    </a-col>
                                                    <a-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16" class="news-list-box-right">
                                                        <router-link :to="{name: 'NewsDetails', params: {newsId: item.id }}" :title="item.title" :alt="item.title">
                                                            {{isNull0(item.title) }}
                                                        </router-link>
                                                        <aside class="webkit-text-overflow-3lines">
                                                            {{isNull0(item.description)}}
                                                        </aside>
                                                        <p class="clearfix">
                                                            <span>
                                                                <i class="iconfont icon-fabushijian"></i>
                                                                {{momentFormat(item.createTime, 'YYYY-MM-DD')}}
                                                            </span>
                                                        </p>
                                                    </a-col>
                                                </article>
                                                <article v-else>
                                                    <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="news-list-box-right">
                                                        <router-link :to="{name: 'NewsDetails', params: {newsId: item.id }}" :title="item.title" :alt="item.title">
                                                            {{isNull0(item.title) }}
                                                        </router-link>
                                                        <aside class="webkit-text-overflow-3lines">
                                                            {{isNull0(item.description)}}
                                                        </aside>
                                                        <p class="clearfix">
                                                            <span>
                                                                <i class="iconfont icon-fabushijian"></i>
                                                                {{momentFormat(item.createTime, 'YYYY-MM-DD')}}
                                                            </span>
                                                        </p>
                                                    </a-col>
                                                </article>
                                            </a-row>
                                        </a-card>
                                    </li>
                                </ul>
                                <div class="Pagination" style="text-align: center; margin: 30px 0 0 0;">
                                    <a-pagination
                                        :showTotal="total => `共 ${total} 条`"
                                        showQuickJumper
                                        showSizeChanger
                                        :current="pageNumber"
                                        :pageSize="pageSize"
                                        :total="total"
                                        @change="pageNumberChange"
                                        @showSizeChange="pageSizeChange"/>
                                </div>
                                <h5 style="text-align: center; padding: 15px;" v-show="noDataShow">暂未查询到数据！</h5>
                            </div>
                        </div>
                    </a-col>
                    <!--公共页面主体的右侧内容-->
                    <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="right-box">
                        <rightList :msgType="5"></rightList>
                    </a-col>
                </a-row>
            </div>
        </div>

        <!--返回顶部-->
        <BackTop :isShowHouseContrast="false"></BackTop>
    </section>
</template>

<script>
    import Header from '../../components/header.vue';//公共组件——头部
    import rightList from '../../components/rightList.vue';//公共组件——页面主体的右侧内容
    import BackTop from '../../components/BackTop.vue';//公共组件——返回顶部

    export default {
        data() {
            return {
                newsType: this.$route.params.type,   //美国房产-6,美国财经-7,移民留学-8,美国生活-9
                newsTypeName: '',   //面包屑导航——新闻资讯类型：美国房产,美国财经,移民留学,美国生活

                oneBigImg: {},  // 广告——新闻类型——五张静态banner图——左侧1张大图
                fourSmallImgItem: [],   // 广告——新闻类型——五张静态banner图——右侧4张小图

                NewsSecondaryTypeItem: [], // 新闻资讯二级类型数据
                pageNumber: 1,  //默认显示第一页
                pageSize: 10,   //默认每页显示10条
                total: 0,    //总条数
                NewsSecondaryTypeListLoading: true,//列表加载loading
                noDataShow: false,//没有数据提示信息是否显示

                metaInfo_title: '',//vue-meta动态管理头部标签-title
                metaInfo_keywords: '',//vue-meta动态管理头部标签-keywords
                metaInfo_description: '',//vue-meta动态管理头部标签-description

            }
        },
        metaInfo () {
            return {
                title: this.metaInfo_title,
                meta: [
                    { vmid: 'keywords', name: 'keywords', content: this.metaInfo_keywords },
                    { vmid: 'description', name: 'description', content: this.metaInfo_description },
                ],
            }
        },
        computed: {},
        created() {
        },
        mounted() {
            //新闻资讯类型：美国房产,美国财经,移民留学,美国生活
            this.newsTitle();
            // 获取广告——新闻类型——五张静态banner图数据
            this.getAdvertisingFiveBannerImg();
            // 获取新闻资讯二级类型数据：美国房产-6,美国财经-7,移民留学-8,美国生活-9
            this.getNewsSecondaryTypeData();
            //获取新闻资讯二级类型的详情页数据
            this.getNewsTypeData();


        },
        methods: {
            //新闻资讯类型：美国房产,美国财经,移民留学,美国生活
            newsTitle() {
                switch (this.newsType){
                    case '6':
                        this.newsTypeName = '海外房产';
                        break;
                    case '7':
                        this.newsTypeName = '海外财经';
                        break;
                    case '8':
                        this.newsTypeName = '移民留学';
                        break;
                    case '9':
                        this.newsTypeName = '海外生活';
                        break;
                }
            },
            // 获取广告——新闻类型——五张静态banner图数据
            getAdvertisingFiveBannerImg() {
                this.$get('/a/5').then(res => {
                    let picData = [];
                    if (res.status == 0) {
                        //过滤掉null的图片
                        picData = res.data.list.filter(item => {
                            return item.photo != null && item.photo != ''
                        });
                        this.oneBigImg = picData[0];
                        this.fourSmallImgItem = picData.splice(1, 4);
                    } else {
                        console.log(res.msg);
                    }
                })
            },

            //处理currentPage当前页变动的事件
            pageNumberChange(page, pageSize) {
                // console.log(page, pageSize)
                this.pageNumber = page;
                this.NewsSecondaryTypeListLoading = true;
                this.getNewsSecondaryTypeData();
            },
            //处理pagesize页码大小变动的事件
            pageSizeChange(current, size) {
                // console.log(current, size)
                this.pageNumber = 1;
                this.pageSize = size;
                this.NewsSecondaryTypeListLoading = true;
                this.getNewsSecondaryTypeData();
            },
            //获取新闻资讯二级类型数据：美国房产-6,美国财经-7,移民留学-8,美国生活-9
            getNewsSecondaryTypeData() {
                this.$get(`/news/list/${this.newsType}/${this.pageNumber}/${this.pageSize}`).then(res => {
                    this.NewsSecondaryTypeListLoading = false;
                    if (res.status === 0) {
                        this.NewsSecondaryTypeItem = res.list;
                        this.total = res.total;
                        this.noDataShow = false;
                    } else {
                        console.log(res.msg);
                        this.total = 0;
                        this.noDataShow = true;
                    }
                })
            },
            //获取新闻资讯二级类型的详情页数据
            getNewsTypeData() {
                this.$get(`/news/type/detail/${this.newsType}`).then(res => {
                    if (res.status === 0) {
                        this.metaInfo_title = res.data.seoTitle;
                        this.metaInfo_keywords = res.data.seoKeyword;
                        this.metaInfo_description = res.data.seoDescription;
                    } else {
                        console.log(res.msg);
                    }
                })
            },

        },
        components: {
            'app-header': Header,//公共组件——头部
            rightList,//公共组件——页面主体的右侧内容
            BackTop,//公共组件——返回顶部
        }
    }
</script>

<style lang="less" type="text/less">
    body {
        .NewsSecondaryList-box {
            .main-content {
                padding: 30px 0;
                >.container{
                    >.ant-row{
                        padding: 40px 0 0 0;
                        >.left-box{
                            padding: 0;
                            position: relative;
                            /*banner广告图*/
                            >.recommend-news-five-banner-box{
                                /*左侧1张大图*/
                                >.left-one-big-img-box{
                                    >figure{
                                        padding: 0;
                                        >.inside{
                                            -webkit-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                            -moz-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                            -ms-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                            -o-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                            transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                            >a {
                                                display: block;
                                                width: 100%;
                                                height: 100%;
                                                position: relative;
                                                overflow: hidden;
                                                background: #000;
                                                > img {
                                                    width: 100%;
                                                    height: 320px;
                                                    -webkit-transition: all linear 1s;
                                                    -moz-transition: all linear 1s;
                                                    transition: all linear 1s;
                                                }
                                                >p{
                                                    width: 100%;
                                                    position: absolute;
                                                    bottom: 0;
                                                    background: rgba(0,0,0,.4);
                                                    font-size: 14px;
                                                    color: #fff;
                                                    padding: 4px;
                                                    margin-bottom: 0px;
                                                }
                                            }
                                            >a:hover {
                                                > img {
                                                    -webkit-transform: scale(1.1, 1.1);
                                                    -moz-transform: scale(1.1, 1.1);
                                                    transform: scale(1.1, 1.1);
                                                }
                                            }
                                        }
                                    }
                                }
                                /*右侧4张小图*/
                                >.right-four-small-img-box{
                                    .right-four-small-img-li{
                                        padding: 0;
                                        >.inside{
                                            -webkit-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                            -moz-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                            -ms-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                            -o-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                            transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                            >a {
                                                display: block;
                                                width: 100%;
                                                height: 100%;
                                                position: relative;
                                                overflow: hidden;
                                                background: #000;
                                                > img {
                                                    width: 100%;
                                                    height: 160px;
                                                    -webkit-transition: all linear 1s;
                                                    -moz-transition: all linear 1s;
                                                    transition: all linear 1s;
                                                }
                                                >p{
                                                    width: 100%;
                                                    position: absolute;
                                                    bottom: 0;
                                                    background: rgba(0,0,0,.4);
                                                    font-size: 14px;
                                                    color: #fff;
                                                    padding: 4px;
                                                    margin-bottom: 0px;
                                                }
                                            }
                                            >a:hover {
                                                > img {
                                                    -webkit-transform: scale(1.1, 1.1);
                                                    -moz-transform: scale(1.1, 1.1);
                                                    transform: scale(1.1, 1.1);
                                                }
                                            }
                                        }
                                    }
                                }
                            }

                            /*新闻资讯二级类型的主体内容*/
                            >.news-secondary-type-box {
                                position: relative;
                                padding: 20px 0;
                                //公共新闻资讯列表内容样式
                                >.public-content{
                                    margin: 30px 0;
                                    >header{
                                        line-height: 36px;
                                        border-bottom: 3px solid #00b8ee;
                                        padding:0px 15px;
                                        >span{
                                            font-size: 18px;
                                            font-weight: bold;
                                        }
                                        >a{
                                            float: right;
                                        }
                                    }
                                    >ul{
                                        >li{
                                            padding: 30px 10px;
                                            border-bottom: 1px solid #E6E6E6;
                                            -webkit-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                            -moz-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                            -ms-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                            -o-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                            transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                            .ant-card {
                                                border: none;
                                                background: #f7f9fa;
                                                > .ant-card-body {
                                                    padding: 0;
                                                    > .ant-row {
                                                        >article {
                                                            > .news-list-box-left {
                                                                > a {
                                                                    text-align: center;
                                                                    padding-right: 15px;
                                                                    > img {
                                                                        width: 100%;
                                                                        height: 160px;
                                                                        cursor: pointer;
                                                                    }
                                                                }
                                                            }
                                                            > .news-list-box-right {
                                                                text-align: justify;
                                                                padding: 0 0 0 15px;
                                                                > a {
                                                                    display: block;
                                                                    font-size: 18px;
                                                                    font-weight: bold;
                                                                    color: #38485a;
                                                                    /*margin: 5px 0;*/
                                                                    cursor: pointer;
                                                                    -webkit-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                                                    -moz-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                                                    -ms-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                                                    -o-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                                                    transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                                                }
                                                                > a:hover {
                                                                    color: #00b8ee;
                                                                }
                                                                > p,
                                                                > aside {
                                                                    font-size: 16px;
                                                                    margin: 10px 0;
                                                                    text-indent: 0;
                                                                }
                                                                > p {
                                                                    color: #999;
                                                                    > span {
                                                                        cursor: pointer;
                                                                    }
                                                                    > span:last-of-type {
                                                                        float: right;
                                                                    }
                                                                }
                                                            }
                                                        }
                                                    }
                                                }
                                            }
                                            .ant-card-hoverable:hover{
                                                box-shadow: none;
                                            }
                                        }
                                        >li:hover{
                                            -webkit-box-shadow: 0 0 30px rgba(0,0,0,0.1);
                                            box-shadow: 0 0 30px rgba(0,0,0,0.15);
                                            -webkit-transform: translate3d(0, 0px, -2px);
                                            transform: translate3d(0, 1px, -2px);
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>
